{% extends "base.html" %}
{% set active_page = "DAM: Dashboard" %}

{% block title %}Dashboard - Assignment 2 of DAM{% endblock %}

{% block head %}
    <link type="text/css" href="{{ url_for('static', filename='css/dashboard.css') }}" rel="stylesheet">
{% endblock %}

{% block content %}
        <div class="container-fluid hard-code-3">
            <div class="row">
                <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
                    <ul class="nav nav-pills flex-column">
                        <li class="nav-item">
                            <a class="nav-link active" href="{{ url_for('home') }}">Overview <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('a_side') }}">A side</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('b_side') }}">B side</a>
                        </li>
                    </ul>
                </nav>

                <main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
                    <h1>Dashboard</h1>

                    <section class="row text-center placeholders">
                        <div class="col-6 col-sm-3 placeholder">
                            <div class="hard-code-1">
                                <img id="img-1" src="" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
                                <h2 class="hard-code-2">200</h2>
                            </div>
                            <h4>音乐数量</h4>
                            <div class="text-muted">居然有这么多啊...</div>
                        </div>
                        <div class="col-6 col-sm-3 placeholder">
                            <div class="hard-code-1">
                                <img src="" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
                                <h2 class="hard-code-2">11h 34min</h2>
                            </div>
                            <h4>总时长</h4>
                            <span class="text-muted">这要放多久啊...</span>
                        </div>
                    </section>
                </main>
            </div>
        </div>
{% endblock %}

{% block scripts %}

{% endblock %}